<template>
  <section class="select">
    <el-select v-model="value" :allow-create="allowcreate" :clearable="clearable" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" style="width: 100%;" @change="handleChange">
      <el-option v-for="(item, index) in (list.length ? list : asyncList)" :key="index" :label="item.name" :value="item.value" />
    </el-select>
  </section>
</template>
<script>
import mixins from './../mixins'
import request from '@/utils/request'
export default {
  name: 'Select',
  inject: ['focusName', 'getListItemInfo', 'portList', 'labelClass'],
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      asyncList: []
    }
  },
  computed: {
    list() {
      return this.option.list || []
    },
    filterable() {
      return this.option.filterable
    },
    allowcreate() {
      return this.option.allowcreate
    },
    _focusName() {
      return this.focusName()
    },
    _portList() {
      return this.portList()
    },
    _labelClass() {
      return this.labelClass()
    }
  },
  mounted() {
    if (this.value && this.option.change) {
      this.option.change(this, this.value)
    }
    if (this.option.override !== undefined) {
      this.option.override(this, this.value)
    }
  },
  created() {
    if (this.option.async) {
      this.getList()
    }
  },
  methods: {
    getList() {
      if (this.option.name === 'choosePort') {
        this.asyncList = this._portList
        return
      } else if (this.option.name === 'type') {
        this.asyncList = this._labelClass
        return
      }
      const data = this.option.asyncParams || {}
      return new Promise((resolve, reject) => {
        request({
          baseURL: '/API-ENTERPRISE-BACKEND/',
          url: this.option.async,
          method: 'post',
          data: data
        }).then(res => {
          const list = res.data.data && res.data.data.length > 0
            ? res.data.data[0].list
            : []
          list.forEach(item => {
            this.asyncList.push({
              value: item.dictValue,
              name: item.dictName
            })
          })
        })
      })
    },
    getValue() {
      return this.value
    },

    setValue(k) {
      this.$set(this, 'value', k)
    },

    setCheck(e) {
      let { value, required } = this
      if (this.option.override !== undefined) {
        this.option.override(this, value, this.list.length ? this.list : this.asyncList)
      }
      if (this.option.change !== undefined) {
        this.option.change(this, e)
      }
      let error = false; let errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange(e) {
      this.setCheck(e)
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
